<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="智能柜名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="containerName">
              <a-input v-model="model.containerName" placeholder="请输入智能柜名称"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="智能柜类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="containerType">
              <a-select
                v-model="model.containerType"
                style="width: 100%"
                placeholder="请选择"
                :options="containerTypeList"
              ></a-select>
            </a-form-model-item>
          </a-col>
          <template v-if="model.containerType != 2">
            <a-col :span="12">
              <a-form-model-item label="货位数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="postionSums">
                <a-input type="number" v-model="model.postionSums" placeholder="请输入货位数量"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="智能柜行数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="row">
                <a-input type="number" v-model="model.row" placeholder="请输入智能柜行数"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="智能柜列数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="col">
                <a-input type="number" v-model="model.col" placeholder="请输入智能柜列数"></a-input>
              </a-form-model-item>
            </a-col>
          </template>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="选择医院" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="warehourse">
              <a-select v-model="model.warehourse" style="width: 100%" placeholder="请选择">
                <a-select-option v-for="(item, index) in hospitalList" :key="index" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="选择科室" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chambeId">
              <a-select v-model="model.chambeId" style="width: 100%" placeholder="请选择">
                <a-select-option v-for="(item, index) in departmentList" :key="index" :value="item.id">
                  {{ item.chambeName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="安卓主板地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="androidMac">
              <a-input v-model="model.androidMac" placeholder="请输入安卓主板地址"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="RFID主板地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="rfidMac">
              <a-input v-model="model.rfidMac" placeholder="请输入RFID主板地址"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备MAC" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mac">
              <a-input v-model="model.mac" placeholder="请输入设备MAC"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row class="checkbox-row">
          <a-col :span="6">
            <a-checkbox :checked="model.haveDoorFlag == '1' ? true : false" @change="accessControlOnChange">
              <span>是否有门禁</span>
            </a-checkbox>
          </a-col>
          <a-col v-if="model.haveDoorFlag" :span="6"
            ><a-checkbox :checked="model.haveFingerprintFlag == '1' ? true : false" @change="fingerprintOnChange">
              <span>是否有指纹</span>
            </a-checkbox>
          </a-col>
          <a-col v-if="model.haveDoorFlag" :span="6">
            <a-checkbox :checked="model.haveNfcFlag == '1' ? true : false" @change="nfcOnChange">
              <span>是否有NFC</span>
            </a-checkbox></a-col
          >
          <a-col :span="6">
            <a-checkbox :checked="model.haveTemperatureHumidityFlag == 1 ? true : false" @change="humiturelOnChange">
              <span>是否有温湿度</span>
            </a-checkbox></a-col
          >
        </a-row>
        <a-row v-if="model.haveDoorFlag == '1'">
          <a-col :span="12">
            <a-form-model-item label="门禁名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="doorName">
              <a-input v-model="model.doorName" placeholder="请输入门禁名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="门禁类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="doorType">
              <a-input v-model="model.doorType" placeholder="请输入门禁类型"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="门禁MAC" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="doorMac">
              <a-input v-model="model.doorMac" placeholder="请输入门禁MAC地址"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="人脸KEY" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="doorActiveKey">
              <a-input v-model="model.doorActiveKey" placeholder="请输入人脸激活KEY"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { queryContainerTypeApi, queryHospitalListApi, queryDepartmentListApi } from '@/api/container.js'

export default {
  name: 'BmsContainerForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      model: {
        haveDoorFlag: false,
        haveFingerprintFlag: false,
        haveNfcFlag: false,
        haveTemperatureHumidityFlag: false,
        bmsOneTouchAddDoorVto: {},
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      pageNo: 1,
      confirmLoading: false,
      validatorRules: {
        containerName: [
          { required: true, message: '请输入智能柜名称!' },
          {
            validator: this.validateInput,
            message: '请输入大小写字母、数字或中文字符',
          },
        ],
        containerType: [{ required: true, message: '请选择智能柜类型!' }],
        postionSums: [
          { required: true, message: '请输入货位数!' },
          {
            validator: this.validateInteger,
            message: '请输入一个非零的正整数',
          },
        ],
        row: [
          { required: true, message: '请输入行数!' },
          {
            validator: this.validateInteger,
            message: '请输入一个非零的正整数',
          },
        ],
        col: [
          { required: true, message: '请输入列数!' },
          {
            validator: this.validateInteger,
            message: '请输入一个非零的正整数',
          },
        ],
        warehourse: [{ required: true, message: '请选择医院!' }],
        chambeId: [{ required: true, message: '请选择科室!' }],
        mac: [],
        doorName: [
          {
            required: true,
            message: '请输入门禁名称',
          },
        ],
        doorMac: [
          {
            required: true,
            message: '请输入门禁MAC地址',
          },
        ],
        doorActiveKey: [
          {
            required: true,
            message: '请输入门禁人脸验证KEY',
          },
        ],
      },
      url: {
        add: '/bms/bmsContainer/oneTouchAddContainer',
        edit: '/bms/bmsContainer/edit',
        // queryById: '/bms/bmsContainer/queryById',
      },
      containerTypeList: [], // 货柜类型
      hospitalList: [], // 医院列表
      departmentList: [], // 科室列表
      checkboxValue: [],
      plainOptions: [
        {
          value: 1,
          lable: '是否有门禁',
          haveDoorFlag: false,
        },
        {
          value: 2,
          lable: '是否有指纹',
          haveFingerprintFlag: false,
        },
        {
          value: 3,
          lable: '是否有NFC',
          haveNfcFlag: false,
        },
        {
          value: 4,
          lable: '是否有温湿度',
        },
      ],
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
    this.getHospitalList()
  },
  mounted() {
    this.getContainerTypeList()
  },
  methods: {
    validateInput(rule, value, callback) {
      const pattern = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/ // 匹配大小写字母、数字和中文汉字的正则表达式
      if (!pattern.test(value)) {
        callback(new Error('请输入大小写字母、数字或中文汉字'))
      } else {
        callback()
      }
    },
    validateInteger(rule, value, callback) {
      const intValue = parseInt(value)
      try {
        if (isNaN(intValue) || intValue <= 0 || value.toString().includes('.') || value.toString().includes('-')) {
          callback(new Error('请输入一个非零的正整数'))
        } else {
          callback()
        }
      } catch (error) {
        console.log(error)
      }
    },
    accessControlOnChange(e) {
      this.model.haveDoorFlag = e.target.checked
    },
    fingerprintOnChange(e) {
      this.model.haveFingerprintFlag = e.target.checked
    },
    nfcOnChange(e) {
      this.model.haveNfcFlag = e.target.checked
    },
    humiturelOnChange(e) {
      this.model.haveTemperatureHumidityFlag = e.target.checked
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    async getContainerTypeList() {
      try {
        const r = await queryContainerTypeApi({ pageNo: 1, pageSize: 10 })
        this.containerTypeList = r.result.map((e) => {
          return { ...e, label: e.desc, value: e.code }
        })
      } catch (err) {
        console.log(err)
        this.$message.error(err)
      }
    },

    async getHospitalList() {
      try {
        const r = await queryHospitalListApi({ pageNo: this.pageNo, pageSize: 10000 })
        this.hospitalList = r.result.records.map((e) => {
          return { ...e, label: e.name, value: e.id }
        })
      } catch (err) {
        console.log(err)
        this.$message.error(err)
      }
    },
    async getDepartmentList() {
      try {
        const r = await queryDepartmentListApi({
          hospitalChamberId: this.model.warehourse,
          pageNo: this.pageNo,
          pageSize: 10000,
        })
        this.departmentList = r.result.records.map((e) => {
          return { ...e, label: e.chambeName, value: e.id }
        })
      } catch (err) {
        console.log(err)
        this.$message.error(err)
      }
    },
    add(list) {
      this.edit(this.modelDefault)
    },
    edit(record) {
      console.log(record)
      this.model = Object.assign({}, record)
      this.getDepartmentList()
      this.visible = true
    },
    submitForm() {
      const that = this
      let { haveDoorFlag, haveFingerprintFlag, haveNfcFlag, haveTemperatureHumidityFlag } = this.model
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          this.model.bmsOneTouchAddDoorVto = {
            haveDoorFlag,
            haveFingerprintFlag,
            haveNfcFlag,
            haveTemperatureHumidityFlag,
          }
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.checkbox-row {
  margin-bottom: 24px;
  .ant-col-6 {
    text-align: center;
  }
  .ant-checkbox-wrapper {
    span {
      color: rgba(0, 0, 0, 0.85) !important;
    }
  }
}
</style>
